<template>
	<view class="control">
		<view class="box-1">
			<view class="postion">
			</view>
		</view>

		<view class="" style="width: 100%;height: 77rpx;background-color: #FFFFFF;">
			<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
				:inactiveStyle="{color: '#666666',}" lineColor="#4BA677" itemStyle="height: 38px;"
				@click=" tabClick"></u-tabs>
		</view>
		<!-- 场地预约 -->
		<view class="box-2" v-if="courtproducts.length != 0 || ticketproducts.length != 0 || cardproducts.length != 0">
			<view class="business" v-if="courtproducts != 0">
				<view class="business-line"></view>
				<view class="business-title">
					<text> 订场 </text>
				</view>
			</view>
			<view class="data-list2" v-if="courtproducts != 0">
				<view class="scroll" style="height: auto;">
					<view class="data-item flex-align" v-for="(item, index) in courtproducts" :key="index"
						@click="cdClick(item, index)">
						<view class="image">
							<u--image :src="item.show_img" width="240rpx" height="154rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1"><text>
										{{ item.court_name }}</text> </view>
								<view class="tag-list flex-align">
									<view v-if="item.venues_project[0].name != undefined" class="tag">
										{{item.venues_project[0].name}}
									</view>
									<view v-if="item.venues_project[1].name != undefined" class="tag">
										{{item.venues_project[1].name}}
									</view>
									<view v-if="item.venues_project[2].name != undefined" class="tag">
										{{item.venues_project[2].name}}
									</view>
									<view v-if="item.venues_project[3].name != undefined" class="tag">
										{{item.venues_project[3].name}}
									</view>
								</view>
							</view>
							<view class="flex-between">
								<view class="flex-align">
									<view class="price">￥{{ item.min_price }}</view>
								</view>
								<view
									style="height: 50rpx;width: 100rpx;background: linear-gradient( 270deg, #57C08B 0%, #69D1A4 100%);border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
									预 订
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="courtnum.length > 3 && courtpage == 1"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="oncourt">
						<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
					</view>
					<view class="" v-if="courtnum.length > 3 && courtpage == 2"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="offcourt">
						<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode=""></image>
					</view>
				</view>
			</view>
			
			
			<!-- 门票购买 -->
			<view class="business" v-if="ticketproducts != 0">
				<view class="business-line"></view>
				<view class="business-title">
					<text> 购票 </text>
				</view>
			</view>
			<view class="data-list1" v-if="ticketproducts != 0">
				<view class="scroll" style="height: auto;">
					<view class="data-item flex-align" v-for="(item, index) in ticketproducts" :key="index"
						@click="ondatalist1(item, index)">
						<view class="image">
							<u--image :src="item.picture" width="240rpx" height="154rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1"><text style="font-size: 30rpx;color: #ffaa00"
										v-if="item.inventory == 0">预约</text><text>
										{{ item.name }}</text> </view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
							</view>
							<!-- <view class="flex-between">
								<view class="price">￥{{ item.selling_price }}</view>
								<view style="height: 50rpx;width: 100rpx;background: linear-gradient( 135deg, #FFBD7E 0%, #EC923E 100%), #56BF89;
										border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
									购买
								</view>
							</view> -->
							<view class="flex-between">
								<view class="flex-align">
									<!-- <price :value="item.selling_price" :color="'#4BA677'"></price> -->
									<view class="price">￥{{ item.selling_price }}</view>
								</view>
								<view
									style="height: 50rpx;width: 100rpx;background: linear-gradient( 135deg, #FFBD7E 0%, #EC923E 100%), #56BF89;border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
									购 票
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="ticketnum.length > 3 && ticketpage == 1"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="onticket">
						<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
					</view>
					<view class="" v-if="ticketnum.length > 3 && ticketpage == 2"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="offticket">
						<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode=""></image>
					</view>
				</view>
			</view>
			<!--会员卡购买 -->
			<view class="business" v-if="cardproducts != 0">
				<view class="business-line"></view>
				<view class="business-title">
					<text> 办卡 </text>
				</view>
			</view>

			<view class="data-list3">
				<view class="scroll">
					<view class="data-item flex-align" v-for="(item, index) in cardproducts" :key="index"
						@click="ondatalist2(item, index)">
						<view class="image">
							<u--image :src="item.picture" width="240rpx" height="154rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1">{{ item.name }}</view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
							</view>
							<view class="flex-between">
								<view class="flex-align">
									<!-- <price :value="item.selling_price" :color="'#4BA677'"></price>、 -->
									<view class="price">￥{{ item.selling_price }}</view>
								</view>
								<view
									style="height: 50rpx;width: 100rpx;
		background-size: 100% 100%;border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;"
		:style="{ backgroundImage: 'url('+kabeij+')'}">
									办 卡
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="cardnum.length > 3 && cardpage == 1"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="oncard">
						<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
					</view>
					<view class="" v-if="cardnum.length > 3 && cardpage == 2"
						style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="offcard">
						<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="position: absolute;top: 200rpx; left: 30%;">
			<u-empty mode="list" text="暂无类目,看看其他商品吧~" :icon="icon1">
			</u-empty>
		</view>
		<u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="not-logged-in">
				<view class="title">授权小程序</view>
				<u-image width="113" height="90" :src="logosrc" v-if="logosrc!=''"></u-image>
				<u-image width="113" height="90" :src="logo_src" v-else></u-image>
				<view class="desc">需要手机号授权登录</view>
				<view class="btns">
					<button class="btn2" @click="cancelogin">取消授权</button>
					<button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">立即授权</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	const personal = require('@/api/personal/index.js');
	export default {
		components: {
			QSNavbar,
			uniRate,
		},
		data() {
			return {
				icon1: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				kabeij: this.$https.assetsPath + 'kabeij.png',
				zx22: this.$https.assetsPath + 'zx22.png',
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "center",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "订场购票",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				list1: [],
				list2: [{
						name: "余氯含量"
					},
					{
						name: "PH值"
					},
					{
						name: "水温"
					},
					{
						name: "温度"
					}
				],
				venueDetail: {},
				timeData: {},
				menuActive: '',
				products: [],
				id: 0,
				belong: 'court',
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 1,
				},
				totalPage: '', //几页
				index_list: {},
				tabindex: 0,
				courtproducts: [],
				ticketproducts: [],
				cardproducts: [],
				cate_id: '',
				courtpage: 1,
				ticketpage: 1,
				cardpage: 1,
				courtnum:0,
				ticketnum:0,
				cardnum:0,
				logo_src: this.$https.assetsPath + 'db34b1cd242d406763397f09ca0aa8e2371b81d4.png',
				loginCode: "",
				showPopup: false,
				logosrc: uni.getStorageSync("heading"),
			};
		},
		onLoad(options) {
			var _this = this
			uni.login({
				success(res) {
					_this.loginCode = res.code
				}
			})
			this.id = options.id;
			// this.belong = options.belong;
			this.menuActive = options.menuActive;
			this.getVenueDetail(options.id);
		},
		methods: {
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top',
					open_id: uni.getStorageSync('openid'),
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					// this.navbarItems_1[1].text = this.venueDetail.venue_name;
					uni.setNavigationBarTitle({
						title: '订场购票办卡'
					});
					this.windows = result.data.windows
					this.getDetaillist(this.id, 0)
				}
			},
			async getDetaillist(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'projects',
					belong: this.belong,
					open_id: uni.getStorageSync('openid'),
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.list1 = result.data.cates;
					this.cate_id = this.list1[0].id
					this.getcatelist()
				}
			},
			async getcatelist() {
				let that = this;
				that.courtproducts = []
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'ticket_and_court',
					belong: this.belong,
					cate_id: this.cate_id,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					open_id: uni.getStorageSync('openid'),
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					if (that.courtpage == 1) {
						that.courtproducts = result.data.products.court.slice(0, 3)
						that.courtnum = result.data.products.court
					} else {
						that.courtproducts = result.data.products.court
					}
					if (that.ticketpage == 1) {
						that.ticketproducts = result.data.products.ticket.slice(0, 3)
						that.ticketnum = result.data.products.ticket
					} else {
						that.ticketproducts = result.data.products.ticket
					}
					if (that.cardpage == 1) {
						that.cardproducts = result.data.products.card.slice(0, 3)
						that.cardnum = result.data.products.card
					} else {
						that.cardproducts = result.data.products.card
					}
				}
			},
			oncourt() {
				this.courtproducts = []
				this.courtpage = 2
				this.getcatelist()
			},
			offcourt() {
				this.courtproducts = []
				this.courtpage = 1
				this.getcatelist()
			},
			onticket() {
				this.ticketproducts = []
				this.ticketpage = 2
				this.getcatelist()
			},
			offticket() {
				this.ticketproducts = []
				this.ticketpage = 1
				this.getcatelist()
			},
			oncard() {
				this.cardproducts = []
				this.cardpage = 2
				this.getcatelist()
			},
			offcard() {
				this.cardproducts = []
				this.cardpage = 1
				this.getcatelist()
			},
			// // 滚动加载
			// onReachBottom() {
			// 	// uni.showLoading({
			// 	// 	title: '加载中'
			// 	// });
			// 	if (this.totalPage <= this.listQuery.pageNo) {
			// 		// uni.hideLoading();
			// 		uni.showToast({
			// 			title: '没有更多了',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.listQuery.pageNo += 1;
			// 	this.getcatelist(this.list1[0].id)
			// },
			// 之前详情
			openStoreDetail() {
				// uni.navigateTo({
				// 	url: "/page_points/storeDetail/storeDetail",
				// });
				uni.navigateTo({
					url: "/pages_other/venue_details/venue_details?venues_id=" + this.id,
				});
			},
			onChange(e) {
				this.timeData = e;
			},
			openDetail() {
				uni.navigateTo({
					url: "/pages/index/coach/coachDetail",
				});
			},
			onlist() {
				// this.tabClick()
			},
			//切换菜单
			// changeMenu(item, index, nameSign) {
			// 	this.listQuery.pageNo = 1
			// 	this.products = []
			// 	this.list1 = []
			// 	this.menuActive = nameSign;
			// 	this.getDetaillist(item, this.id, index);

			// },
			tabonClick(index) {
				this.tabindex = index.index
			},
			tabClick(index) {
				this.courtpage = 1
				this.ticketpage = 1
				this.cardpage = 1
				this.courtproducts = []
				this.ticketproducts = []
				this.cardproducts = []
				this.listQuery.pageNo = 1
				this.index_list = index
				this.cate_id = index.id
				this.getcatelist()
			},
			cdClick(item) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: item.id
				};
				train.getCourtProduct(data).then(result => {
					let open_time_end = result.data.result.open_time_end
					let open_time_start = result.data.result.open_time_start
					let tip = result.data.result.tip
					if (this.time_list > open_time_start && this.time_list < open_time_end) {
						if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
							this.showPopup = true
						} else {
							uni.navigateTo({
								url: './stadium/stadium?id=' + item.id +
									"&court_id=" +
									item.id +
									"&name=" +
									item.court_name +
									'&venue_id=' +
									this.venueDetail.id +
									'&windows=' +
									item.windows
							})
						}

					} else {
						uni.showModal({
							// title: data[1],
							content: tip,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {}
							}
						});
					}
				})

			},
			addresslist() {
				uni.openLocation({
					latitude: Number(this.venueDetail.lat), //要去的纬度-地址
					longitude: Number(this.venueDetail.lng), //要去的经度-地址
					address: this.venueDetail.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
			onGetPhoneNumber(e) {
				var _this = this
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				} else {
					// 获取手机号并解密
					uni.checkSession({
						success() {
							// session未过期,并且在本生命周期一直有效 (这里可以不写代码)
						},
						fail() {
							// session_key已失效,需要重新登录流程并更新code
							uni.login({
								success(res) {
									_this.loginCode = res.code
								}
							})
						},
						complete() {
							// 将code,iv,encryptedData传给后端进行解密
							let params = {
								appid: _this.$https.weixinAppId,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								code: _this.loginCode,
								project_id: getApp().globalData.projectId,
								references: uni.getStorageSync("openidlist"),
								invite_code: uni.getStorageSync("codescene") //二维码用户openid
							}
							_this.appletPhoneLogin(params)
						}
					})
			
				}
			},
			cancelogin() {
				this.showPopup = false
			},
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await personal.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					that.showPopup = false
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			},
			ondatalist1(item, index) {
				if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
					this.showPopup = true
				} else {
					uni.navigateTo({
						url: './ticketModule/ticketModule?id=' + item.id +
							"&venue_name=" +
							this.venueDetail.venue_name +
							'&venue_id=' +
							this.venueDetail.id
					})
				}
				
			},
			ondatalist2(item, index) {
				if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
					this.showPopup = true
				} else {
					uni.navigateTo({
						url: './memberCard/memberCard?id=' + item.id +
							"&venue_name=" +
							this.venueDetail.venue_name +
							'&venue_id=' +
							this.venueDetail.id
					})
				}
			},
			ondatalist3(item, index) {
				uni.navigateTo({
					url: '/pages_other/train/train?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id +
						'&train_enum_id=' +
						item.train_enum_id
				})

			},
			ondatalist4(item, index) {
				uni.navigateTo({
					url: '/pages_other/race/race?id=' + item.id +
						"&venue_name=" +
						this.venueDetail.venue_name +
						'&venue_id=' +
						this.venueDetail.id +
						'&cate_type=' +
						item.cate_type +
						'&windows=' +
						item.windows
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// height: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		
		/deep/.u-tabs {
			background-color: #fff;
			
		}
	}
	
	.not-logged-in {
		width: 619rpx;
		height: 508rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
		border-radius: 10rpx;
	
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding-top: 43rpx;
		}
	
		.close {
			color: #AAAAAAFF;
			font-size: 40rpx;
			font-weight: bold;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
	
		/deep/ .u-image {
			margin: auto;
			margin-top: 52rpx;
		}
	
		.desc {
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}
	
		.desc2 {
			color: #ADADADFF;
			font-size: 26rpx;
			text-align: center;
			margin-top: 18rpx;
		}
	
		.btns {
			display: flex;
	
			.btn {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #4BA677;
				border-top: 1px solid #E6E6E6FF;
			}
	
			.btn2 {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #000;
				border-top: 1px solid #E6E6E6FF;
			}
		}
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

	}

	.box-2 {
		padding: 0px 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-radius: 10rpx;

		.business {
			display: flex;
			align-items: center;
			height: 80rpx;
			width: 100%;
		}

		.business-line {
			background:linear-gradient( 270deg, #57C08B 0%, #69D1A4 100%);
			width: 6rpx;
			height: 24rpx;
			border-radius: 12rpx;
		}

		.business-title {
			color: #333333;
			font-size: 28rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}

		// 列表1
		.data-list1 {

			.scroll {
				height: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			.data-item {
				// margin-top: 20rpx;
				// height: 210rpx;
				// width: 690rpx;
				// background-color: #ffffff;
				// padding: 10rpx;
				// border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				// border-radius: 6rpx;
				// box-shadow: 30px 2px 10px #f9f9f9;
				padding: 20rpx 0;
				width: calc(100% - 40rpx);
				height: 194.5rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				// margin-bottom: 20rpx;
				// padding: 20rpx 20rpx;

				.image {
					// padding-left: 10rpx;
					width: 240rpx;
					height: 154rpx;
					border-radius: 5px;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 10rpx;
				
					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
				
					.tag-list {
						margin-bottom: 10rpx;
				
						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}
				
					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}
				
					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}
				
					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.business {
			display: flex;
			align-items: center;
			// margin-left: 26rpx;
			height: 80rpx;
			width: 100%;
		}

		.business-line {
			background: linear-gradient( 270deg, #57C08B 0%, #69D1A4 100%);
			width: 6rpx;
			height: 24rpx;
			border-radius: 12rpx;
		}

		.business-title {
			color: #333333;
			font-size: 28rpx;
			margin-left: 10rpx;
		}

		.data-list2 {
			.scroll {
				height: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}
			
			.data-item {
				// margin-top: 20rpx;
				// height: 210rpx;
				// width: 690rpx;
				// background-color: #ffffff;
				// padding: 10rpx;
				// border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				// border-radius: 6rpx;
				// box-shadow: 30px 2px 10px #f9f9f9;
				// width: 100%;
				height: 194.5rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				// margin-bottom: 20rpx;
				padding: 20rpx 0;
				width: calc(100% - 40rpx);
			
				.image {
					// padding-left: 10rpx;
					width: 240rpx;
					height: 154rpx;
					border-radius: 5px;
			
					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}
			
				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 10rpx;
				
					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
				
					.tag-list {
						margin-bottom: 10rpx;
				
						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}
				
					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}
				
					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}
				
					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		//列表2
		.data-list3 {
			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				// align-items: center;
			}

			.data-item {
				padding: 20rpx 0;
				width: calc(100% - 40rpx);
				height: 194.5rpx;
				padding-bottom: 20rpx;
				// padding: 20rpx 20rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				// padding-left: 20rpx;
				margin-left: 20rpx;


				.image {
					width: 240rpx;
					height: 154rpx;
					border-radius: 5px;
					// overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}


				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 10rpx;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

	}
</style>